<template>
  <button @click="scroll" class="scroll-button">
    <slot v-if="$slots.default">
      <!-- 如果有默认插槽内容，使用插槽内容 -->
      <slot />
    </slot>
    <span v-else :class="direction === 'up' ? 'arrow-up' : 'arrow-down'">
      <!-- 默认图标 -->
       <template v-if="direction === 'up'"> 
        <font-awesome-icon :icon="['fas', 'angles-up']" />
      </template>
      <template v-else> 
        <font-awesome-icon :icon="['fas', 'angles-down']" />
      </template>
    </span>
  </button>
</template>

<script setup lang="ts">
import { defineProps, ref, onMounted } from 'vue';

const props = defineProps({
  direction: {
    type: String,
    default: 'down',
    validator: (value: string) => ['up', 'down'].includes(value)
  },
  // 新增一个 prop 用于接收要控制滚动的元素选择器
  scrollTarget: {
    type: String,
    default: null
  },
  scrollSimpleBar: {
    type: Boolean,
    default: () => false
  },
});

const scrollElement = ref<HTMLElement | null>(null);

onMounted(() => {
  if (props.scrollTarget) {
    scrollElement.value = document.querySelector(props.scrollTarget);
  } 
  if (props.scrollSimpleBar) {
    scrollElement.value = document.querySelector(props.scrollTarget+' .simplebar-content-wrapper');
  }
});

const scroll = () => {
  let target = scrollElement.value || window;
  const height = target === window ? window.innerHeight : (target as HTMLElement).clientHeight;
  
  if (props.direction === 'up') {
    target.scrollBy({
      top: -height,
      behavior: 'smooth'
    });
  } else {
    console.log("向下滚动：", height, target.scrollBy)
    target.scrollBy({
      top: height,
      behavior: 'smooth'
    });
  }
};
</script>

<style scoped>
.scroll-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  z-index: 1000;
}

.arrow-up,
.arrow-down {
  font-size: 18px;
}
</style>